<template>
  <div class="profile_my">
    <div class="profile_my-edit-avatar">
      <input @change="avatarHandler" ref="file" type="file" accept="image/*">
    </div>
    <div class="profile_my-avatar">
      <div class="profile_my-avatar-left">
        <div @click="file.click()" class="profile_my-avatar-left-img">
          <img :src="imgSrc" alt="">
          <div class="profile_my-avatar-left-edit">
            <el-icon size="14" color="#fff">
              <Edit />
            </el-icon>
          </div>
        </div>
      </div>
      <div @click="editProfile" class="profile_my-avatar-right">
        <el-icon v-if="readonly" size="22" color="#fff">
          <Edit />
        </el-icon>
        <el-icon v-else size="22" color="#fff">
          <Check />
        </el-icon>
        <span>{{ readonly ? '编辑信息' : '提交信息' }}</span>
      </div>
    </div>
    <div class="profile_my-info">
      <div class="profile_my-info-item" v-for="item in profileList" :key="item.id">
        <div>{{ item.text }}</div>
        <div>
          <input :style="`border: 1px solid ${ readonly ? 'rgba(163, 170, 171, 0.2)' : 'rgba(0, 0, 0, 0.2)' };`" v-model="item.value" type="text" :readonly="readonly">
        </div>
      </div>
    </div>
    <div class="profile_my-desc">
      <div>个人简介</div>
      <textarea :style="`border: 1px solid ${ readonly ? 'rgba(163, 170, 171, 0.2)' : 'rgba(0, 0, 0, 0.2)' };`" placeholder="请输入您的个人简介..." v-model="description"  :readonly="readonly"></textarea>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 文件输入框的DOM
const file = ref()

const readonly = ref(true)

// 头像地址
const imgSrc = ref('/img/avatar.jpg')

const description = ref('这个人太懒了，还没有简介...')

const profileList = ref([
  {
    id: 1,
    text: '姓名',
    value: '哆哆西.'
  },
  {
    id: 2,
    text: '电子邮件',
    value: '3078076201@qq.com'
  }
])

// 头像处理--用户点击头像后，弹出修改头像的框，修改完头像后触发该方法，该方法必须包含后端请求修改用户的头像
const avatarHandler = () => {
  // 判断用户是否点击了取消
  if (!file.value.files[0]) return

  const reader = new FileReader()
  reader.readAsDataURL(file.value.files[0])
  reader.onload = () => {
    imgSrc.value = reader.result as string
  }

  const formData = new FormData()
  formData.append('file', file.value.files[0])
  console.log(formData.get('file'))
  // 在下方完成后端请求操作.............
}

// 用户点击编辑信息后触发该函数
const editProfile = () => {
  readonly.value = !readonly.value
}
</script>

<style lang="less" scoped>
@primary-color: #088395;
@primary-hover-color: rgb(22, 162, 184);
@primary-font-family: 'Helvetica';

.profile_my {
  font-family: @primary-font-family;

  .profile_my-edit-avatar {
    display: none;
  }

  .profile_my-avatar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .profile_my-avatar-left {
      .profile_my-avatar-left-img {
        width: 80px;
        height: 80px;
        position: relative;
        cursor: pointer;

        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }

        .profile_my-avatar-left-edit {
          width: 24px;
          height: 24px;
          background-color: @primary-color;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 0;
          z-index: 99;
          right: 0;
          border-radius: 8px;
        }
      }
    }

    .profile_my-avatar-right {
      width: 169px;
      height: 56px;
      border-radius: 10px;
      background: @primary-color;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s;
      cursor: pointer;

      :deep(.el-icon) {
        display: inline-block;
        margin-bottom: -2.5px;
      }

      span {
        display: inline-block;
        color: #fff;

        font-size: 16px;
        font-weight: 400;

        margin-left: 10px;
      }

      &:hover {
        background: @primary-hover-color;
      }
    }
  }

  .profile_my-info {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .profile_my-info-item {
      display: flex;
      flex-direction: column;
      width: 48%;

      div:first-child {
        color: rgb(20, 28, 29);
        font-size: 12px;
        font-weight: 400;
      }

      div:last-child {
        height: 56px;
        margin-top: 10px;

        input {
          font-family: @primary-font-family;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 10px 16px;
          outline: none;

          color: rgb(20, 28, 29);
          font-size: 16px;
          font-weight: 400;
        }
      }
    }
  }

  .profile_my-desc {
    margin-top: 22px;

    div {
      color: rgb(20, 28, 29);
      font-size: 12px;
      font-weight: 400;
      margin-bottom: 10px;
    }

    textarea {
      width: 100%;
      height: 150px;
      resize: none;
      font-family: @primary-font-family;

      box-sizing: border-box;
      border-radius: 10px;
      padding: 10px 16px;
      outline: none;

      color: rgb(20, 28, 29);
      font-size: 16px;
      font-weight: 400;
    }
  }
}
</style>